<template>
  <div class="orderPay">
    <h1>请支付</h1>
    <div class="header">
      <ul class="left">
        <li>支付宝</li>
        <li>|</li>
        <li>收银台</li>
      </ul>
      <ul class="right">
        <li>支付宝账号:</li>
        <li>招人代付</li>
        <li>|</li>
        <li>唯一热线:95188</li>
      </ul>
    </div>
    <div class="center">
      <div class="moneyclass">
        <div class="shopDetail"> 商品信息: 
          <p class="item" v-for="item in goods">{{item.s_good.name}}{{item.s_good.desc}}</p><br> 
        </div>
        <p>订单金额: &yen;{{totalPrice}}元</p>
      </div>
     <div class="payContainer">
      <div class="leftPassword">
           <div class="cardMoney">
            <p> 中国光大银行</p>
            <p>储蓄卡|快捷</p>
            <p>支付&yen;{{totalPrice}}元</p>
           </div>
           <button class="pay_0ne">其他方式付款</button>
           <p>支付宝密码:</p> 
           <input type="password" placeholder="请输入支付密码" ><br>
           <button class="btn" @click="goOrderList">点击确认</button>
      </div>
      <div class="erweima">
        <p>扫一扫二维码快捷支付</p>
        <div class="imgBox">
          <img src="./images/u_666927474_3753237121&fm_253&fmt_auto&app_138&f_GIF.gif" alt="">
        </div>
        </div>
     </div>

    </div>
  </div>
</template>

<script>
import {getCartInfo,} from "../assets/request.js"
export default {
  name: "OrderPay",
  data(){
  return {
    //放购物车商品
    goods:[],
    //总价格
    totalPrice:0,
  }
  },
methods:{
  //跳转到订单列表页
  goOrderList(){
    this.$router.push(
      {
        name:"orderlist",
        params:{},
      }
    )
  }
},

 async mounted(){
  this.goods=JSON.parse(sessionStorage.getItem("goodSelect"))
  this.totalPrice=this.goods.filter((item) => {
    return item.select
  }).reduce((prev,item) => {
    return  prev += item.num*(1*item.s_good.price)
  },0)
    this.goods.forEach((element) => {
      this.$set(element, "select", true)
    })
  }
};
</script>

<style lang="scss" scoped>
$color:#e1251b;/* 页面主调配色 */
$color1:#f1f3f5; /* main以及占位部分背景色 */
.orderPay{
  margin: 0 auto;
  margin-top: 10px;
  min-width: 600px;
  width: 1226px;
 h1{
  padding: 10px 10px;
  text-align: start;
  margin-left: 4px;
  background-color: $color1;
 }

  .header{
     display: flex;
     justify-content: space-between;
     >.left{
      display: flex;
     justify-content: space-between;
     >li{
      font-size: 12px;
      padding: 10px 10px;
     }
     }
     .right{
      display: flex;
     justify-content: space-between;
     >li{
      font-size: 12px;
        padding: 10px 10px;
     }
     }
  }
  .center{
    overflow: hidden;
    background-color: $color1;
    .moneyclass{
      overflow: hidden;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      >.shopDetail{
        text-align: start;
        >.item{
        display: block;
        margin-left: 60px;
      }
      }
     

    }
    .payContainer{
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
      .leftPassword{
        text-align: start;
        width: 1000px;
        margin-bottom: 30px;
        background-color: #fff;
        >.cardMoney{
          margin-left: 10px;
          margin-top: 10px;
          width: 600px;
          padding: 10px 10px;
          border:3px solid skyblue;
          display: flex;
          justify-content: space-between;
        }
        .pay_0ne{
          height: 20px;
          margin-top: 10px;
          margin-bottom: 10px;
          margin-left: 10px;
          
          
          
        }
        >p{
          margin-left: 10px;
          margin-bottom: 10px;
        }
        >input{
          margin-left: 10px;
          margin-bottom: 10px;
        }
        >.btn{
          width: 100px;
          height: 30px;
          margin-left: 10px;
          margin-bottom: 10px;
          border-radius: 20px;
          border: 1px solid red;
          background-color: #fff;
          &:hover{
            border: 1px solid red;
            background-color:red;
            color: #fff;
          }
        }

      }
      >.erweima{
       width: 80px;
       >p{
        margin-top: 40px;
        margin-bottom: 10px;
       }
      }
    }
  }
}
</style>
